<div [class]="model.cssClasses.root" #contentElement>
  <div *ngIf="model.hasTabbedMenu" [class]="model.getTabsContainerCss()">
    <sv-action-bar [model]="model.tabbedMenu"></sv-action-bar>
  </div>
  <sv-ng-placeholder-paneldynamic [question]="model"></sv-ng-placeholder-paneldynamic>
  <div [class]="model.cssClasses.progress" *ngIf="model.isProgressTopShowing && model.isRangeShowing">
    <div [class]="model.cssClasses.progressBar" [style]="{ width: model.progress }"
    role="progressbar" [attr.aria-label]="model.progressBarAriaLabel"
    ></div>
  </div>
  <div [class]="model.cssClasses.panelsContainer">
    <ng-container *ngFor="let panel of model.renderedPanels; index as index; trackBy: trackPanelBy">
      <div [class]="model.getPanelWrapperCss(panel)">
        <ng-template
          [component]="{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }"></ng-template>
        <ng-container *ngIf="model.canRenderRemovePanelOnRight(panel)">
          <ng-template
            [component]="{ name: 'sv-paneldynamic-remove-btn', data: { data: { panel, question: model }}}"></ng-template>
        </ng-container>
      </div>
      <hr [class]="model.cssClasses.separator" *ngIf="model.showSeparator(index)" />
    </ng-container>
  </div>
  <sv-ng-paneldynamic-add-btn *ngIf="model.showLegacyNavigation && model.isRenderModeList"
    [data]="{ question: model }"></sv-ng-paneldynamic-add-btn>
  <ng-container [ngTemplateOutlet]="progressV2" *ngIf="model.showNavigation"></ng-container>
</div>
<ng-template #progressV2>
  <div [class]="model.cssClasses.footer" *ngIf="!!model.cssClasses.footer">
    <hr [class]="model.cssClasses.separator" />
    <div [class]="model.cssClasses.progress" *ngIf="model.isRangeShowing && model.isProgressBottomShowing">
      <div [class]="model.cssClasses.progressBar" [style]="{ width: model.progress }" 
      role="progressbar" [attr.aria-label]="model.progressBarAriaLabel"
      ></div>
    </div>
    <div *ngIf="model.showFooterToolbar" [class]="model.cssClasses.footerButtonsContainer">
      <sv-ng-action-bar [model]="model.footerToolbar"></sv-ng-action-bar>
    </div>
  </div>
</ng-template>